<template>
  <div class="bg-page1">
    <!-- 广告区 -->
    <div class="swiper-container1">
      <div class="swiper-wrapper" v-if="!loadState">
        <img
          class="loading"
          src="../assets/loading/Fg7PS0IesulBHFZwCvfx9-pj6fgs.gif"
          alt=""
        />
      </div>
      <div class="swiper-wrapper" v-if="loadState">
        <div class="swiper-slide" v-for="(re, ri) in recommendList" :key="ri">
          <!-- <img :src="`${re.poster}`"/> -->
          <img :src="`${re.poster.replace(/170.230/, '400.800')}`" />
        </div>
      </div>
      <!-- 分页 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 正在热映 -->
    <hot-list></hot-list>
    <!-- 待映推荐 -->
    <staty-list></staty-list>
    <!-- 期待。瀑布式布局 -->
    <expect-list></expect-list>
  </div>
</template>
<script>
import Swiper from "swiper";
import hotList from "../components/comp-pagehot.vue";
import statyList from "../components/comp-pagestaty.vue";
//
import expectList from "../components/comp-pageexpect.vue";
export default {
  name: "hpage1",
  data() {
    return {
      recommendList: [],
      loadState: false, //loading状态
    };
  },
  components: {
    hotList,
    statyList,
    expectList,
  },
  methods: {
    getData() {
      this.loadState = false;
      let pro = axios.get("index/topRatedMovies");
      pro
        .then((res) => {
          //  banner轮播推荐
          setTimeout(() => {
            this.loadState = true;
            this.recommendList = res.movieList.slice(0, 6);
          });
          //  console.log("请求成功----->", res.movieList);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
  },
  created() {
    //   初始化
    this.getData();
  },
  mounted() {
    new Swiper(".swiper-container1", {
      autoplay: true, //可选选项，自动滑动
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,//滑动后继续轮播
      },
      paginationType: "custom",
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      pagination: {
        el: ".swiper-pagination",
        type: "custom",
        renderCustom: function (swiper, current, total) {
          var customPaginationHtml = "";
          for (var i = 0; i < total; i++) {
            //判断哪个分页器此刻应该被激活
            if (i == current - 1) {
              customPaginationHtml +=
                '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
            } else {
              customPaginationHtml +=
                '<span class="swiper-pagination-customs"></span>';
            }
          }
          return '<span class="swiperPag">' + customPaginationHtml + "</span>";
        },
      },
    });
  },
};
</script>

<style lang="scss">
.bg-page1 {
  width: 100%;
  background: #f1f1f1;
  padding-top: 15px;
}
.swiper-container1 {
  position: relative;
  width: 352px;
  margin: 80px auto 0;
  // padding-top : 10px;
  overflow: hidden;
  border-radius: 8px;
  .swiper-wrapper {
    .loading {
      width: 352px;
      height: 100px;
      object-fit: cover;
    }
    .swiper-slide {
      width: 352px;
      height: 100px;
      img {
        width: 352px;
        height: 100px;
        object-fit: cover;
      }
    }
  }
}
// .swiper-pagination-bullet {
//   width: 30% !important;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   z-index: 9;
//   transform: translateY(40px);
//   border-radius: 10px;
//   overflow: hidden;
// }
// .swiper-pagination-bullet-active {
//   color: #f00;
// }
// .swiper-pagination-progressbar {
//   background: rgba(255, 255, 255, 0.5) !important;
// }
// .swiper-pagination-progress {
//   background: rgba(255, 255, 255, 0.2);
// }
// //
//
// 自定义分页器
.swiperPag {
  width: 120px;
  height: 3px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  // bottom: 0.27rem;
  // background: #000;
}
.swiper-pagination-customs {
  width: 20px;
  height: 4px;
  display: inline-block;
  border-radius: 7px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
  background: rgba(255, 255, 255, 0.4);
  animation: masked 0.6s linear;
}
@keyframes masked {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.1);
  }
}
</style>